<template>
	<div class="comm">
		<nav>
			<div class="a">
				<div class="a1">
					<!--<div class="a1">-->
					<router-link to="/">正在热映</router-link>
				</div>
				<!--</div>-->
				<!--<div class="a2">-->
				<div class="a2">
					<router-link to="/comm">即将上映</router-link>
				</div>
				<img src="../assets/magnifier.png" class="magnifier" />
			</div>

			<!--</div>-->

		</nav>
		<div class="lunbo">
			<!--<md-card>-->
			<!--<md-card-actions>-->

			<!--<md-button class="md-icon-button" target="_blank" href="https://github.com/surmon-china/vue-awesome-swiper/blob/master/examples/11-slides-per-view.vue">

					</md-button>-->
			<!--</md-card-actions>-->
			<!--<md-card-media>-->
			<!-- swiper -->
			<!--轮播图-->
			<swiper :options="swiperOption" v-infinite-scroll="loadMores" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
				<swiper-slide v-for="(item,index) in coming">
					<div class="img">
						<img :src="re(item.img)" />
						<span class="wish"><span>{{item.wish}}</span><span>人想看</span></span>
					</div>

					<p>{{item.nm}}</p>
					<p>{{item.comingTitle}}</p>
				</swiper-slide>

			</swiper>
			<!--</md-card-media>-->
			<!--</md-card>-->
		</div>
		<div class="showday" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
			<ul v-for="(value,item) in fenzu">

				<p class="ctitle">{{item}}</p>
				<li v-for="i in value" class="clearfix">

					<div class="comingleft fl clearfix">
						<img :src="re(i.img)" class="fl" />
						<p class="nm">{{i.nm}}</p>
						<p class="wi">{{i.wish}}<span>人想看</span></p>
						<p class="star" v-if="i.star!==undefined">主演{{i.star}}</p>
						<p class="rt">{{i.rt}}<span>上映</span></p>
					</div>
					<div class="comingright fr">
						<button v-if="i.showInfo!==undefined" class="sale">预售</button>
						<button v-if="i.showInfo==undefined" class="see">想看</button>
					</div>
				</li>

			</ul>
		</div>
       <div class="loading2 clearfix" v-show="show">
			<mt-spinner :type="3" size="50" color="#999" class="fl"></mt-spinner>
		</div>
	</div>

</template>

<script>
	var flag = false;
	import qs from 'qs'
	export default {

		created() {

			this.axios.get('/ajax/mostExpected', {
				params: {
					ci: 20,
					limit: 10,
					offset: 0,
					token: '',
				}
			}).then(res => {
				console.log(res)
				this.coming = res.data.coming;
				console.log('coming', this.coming)
			})
			this.axios.get('/ajax/comingList', {
				params: {
					ci: 20,
					token: '',
					limit: 10,
				}
			}).then(res => {

				console.log('comimglist1', res.data)

				this.comingList = res.data.coming;
				this.movieIds = res.data.movieIds;
				//				console.log(this.comingList[5].showInfo)
				this.comingList.forEach((item) => {
					if(!this.fenzu[item.comingTitle]) {
						this.fenzu[item.comingTitle] = [];
					}
					this.fenzu[item.comingTitle].push(item);
				})
				this.$nextTick(() => {
					this.flag = true;
				})
              this.show = false;
			})
			this.$forceUpdate();
			console.log(this.fenzu)
			console.log(this.flag)
		},
		data() {
			return {
				coming: [],
				comingList: [],
				comingTitle: [],
				movieIds: [],
				mid: '',
				fenzu: {},
				num: 0,
				i: 10,
				t: 0,
				flag: false,
				limit: 10,
				show:true,
				swiperOption: {
					slidesPerView: 'auto',
					spaceBetween: 30,
					//					centeredSlides: true,

					pagination: {
						el: '.swiper-pagination',
						clickable: true,

					}
				},
			}
		},
		methods: {

			re(img) {
				if(typeof img == 'string') {

					return img.replace('w.h', '128.180');
				}
			},
			loadMore() {
				

				//				if(i<this.comingList.)
				console.log(this.num)
				if(this.flag === true) {
					this.num++;
					this.flag = false;
					this.show = true;
					this.t = this.i
					if(this.t + 10 > this.movieIds.length) {
						for(this.i; this.i < this.movieIds.length; this.i++) {
							if(this.i < this.movieIds.length - 1) {
								this.mid += this.movieIds[this.i] + ','
							} else {
								this.mid += this.movieIds[this.i]
							}
						}
					} else {
						for(this.i; this.i <= this.t + 10; this.i++) {
							if(this.i < this.t + 10) {
								this.mid += this.movieIds[this.i] + ','
							} else {
								this.mid += this.movieIds[this.i]
							}
						}
					}

					console.log(this.mid)
					console.log('到底')
					this.axios.get('/ajax/moreComingList', {
						params: {
							ci: 20,
							token: '',
							limit: 10,
							movieIds: this.mid,
						}
					}).then(res => {
						console.log('comimglist', res)

						this.comingList = res.data.coming;
						this.comingList.forEach((item) => {
							if(!this.fenzu[item.comingTitle]) {
								this.fenzu[item.comingTitle] = [];
							}
							this.fenzu[item.comingTitle].push(item);
						})
                       this.flag = true;
                       this.show = false;
					})
					this.$forceUpdate();
					this.mid = '';
					console.log(this.fenzu)
				}

			},
			loadMores() {
				
				this.limit += 10;
				this.axios.get('/ajax/mostExpected', {
					params: {
						ci: 20,
						limit: this.limit,
						offset: 0,
						token: '',
					}
				}).then(res => {
					console.log(res)
					this.coming = res.data.coming;
					console.log('coming', this.coming)
					
				})
			},
		},
	}
</script>

<style scoped scoped="scoped">
	.comm {
		margin-top: 40px;
	}
	
	.swiper-container {
		z-index: 0;
	}
	
	.lunbo {
		height: 180px;
		/*background: #ccc;*/
		border-bottom: 10px solid whitesmoke;
		/*margin-top: 80px;*/
		padding-top: 40px;
	}
	
	.lunbo .img {
		position: relative;
	}
	
	.lunbo img {
		height: 120px;
		width: 85px;
		align-items: center;
		margin-top: 10px;
		/*position: absolute;*/
	}
	
	.swiper-slide {
		width: 90px !important;
		/*display: inline-block;*/
		/*position: relative;*/
	}
	
	.wish {
		color: yellow;
		position: absolute;
		bottom: 10px;
		left: 0;
		font-size: 10px;
	}
	
	.swiper-slide p {
		font-size: 16px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		width: 85px;
	}
	
	.swiper-slide p:nth-of-type(2) {
		color: #ccc;
		font-size: 14px;
	}
	
	.showday {
		margin-top: 30px;
	}
	
	.showday .comingleft {
		padding-top: 15px;
		width: 80%;
	}
	
	.showday .comingleft img {
		width: 85px;
		height: 120px;
		/*margin-top:15px;*/
	}
	
	.showday .comingleft p {
		line-height: 30px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	
	.showday ul li {
		height: 150px;
		border-bottom: 1px solid #ccc;
	}
	
	.showday .comingleft .nm {
		font-weight: 600;
		font-size: 20px;
	}
	
	.showday .comingleft .wi {
		color: yellow;
	}
	
	.showday .comingleft .wi span {
		color: #000;
		margin-left: 5px;
	}
	
	.showday .comingleft img {
		margin-right: 10px;
	}
	
	.showday .comingleft .star {
		color: #CCCCCC;
		font-size: 14px;
	}
	
	.showday .ctitle {
		color: #ccc;
		margin-top: 10px;
		font-size: 20px;
	}
	
	.showday .comingright button {
		width: 50px;
		height: 30px;
		border-radius: 10%;
		margin-top: 60px;
		margin-right: 10px;
		color: white;
	}
	
	.showday .comingright .sale {
		background: #3C9FE6;
	}
	
	.showday .comingright .see {
		background: red;
	}
	
	nav {
		height: 40px;
		width: 100%;
		border-bottom: 1px solid #ccc;
		/*overflow: hidden;*/
		position: relative;
		position: fixed;
		background: white;
		z-index: 1000;
		box-sizing: border-box;
	}
	
	nav a {
		line-height: 40px;
		font-size: 18px;
	}
	
	nav .a1,
	nav .a2 {
		display: inline-block;
		width: 50%;
		overflow: hidden;
		text-align: center;
	}
	
	nav .a2 {
		border-bottom: 1px solid red;
	}
	
	nav .a2,
	nav .a2 a:visited {
		color: red;
	}
	
	nav .a1,
	nav .a1 a:visited {
		color: #666;
	}
	
	nav .a {
		display: inline-block;
		position: absolute;
		left: 50%;
		width: 50%;
		transform: translateX(-50%);
	}
	
	nav .magnifier {
		width: 20px;
		/*width: 100%;*/
		position: absolute;
		right: -40%;
		top: 50%;
		transform: translateY(-50%);
		display: inline-block;
	}
	.loading,
	.loading2 {
		display: inline-block;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		margin-top: 40px;
		height: 20px;
	}
</style>